import "./orderCart.scss";
import $ from "jquery";
import Cart from "../../parts/cart/cart";
import ProfileMgr from "../../data/ProfileMgr";
import Header from "../../parts/inc/header.js";
/*购物车商品start*/
class RenderGoods{
    constructor(){
        this.init.call(this);
    }
    init(){
        this.m_cartList = [];
        this.m_cartsCbs = $.Callbacks();
        this.bindEvent();
        this.m_cartsCbs.fire();
        this.handlerEvent();
        this.oriCnt = 0;
    }
    getStorage(){
        ProfileMgr.repeatLoad(); 
        this.m_cartList = ProfileMgr.getCartList();
    }
    bindEvent(){
        this.m_cartsCbs.add([$.proxy(this.getStorage,this), 
            $.proxy(this.render,this)]);

    }
    handlerEvent(){
        let that =  this;
        $(".goodsBody").on("click", ".jian",function(){
            let goodsId = $(this).parents(".generalGoods").data("goodsid");
            that.removeGoods(goodsId);
        });
        $(".goodsBody").on("click", ".jia",function(){
            let goodsId = $(this).parents(".generalGoods").data("goodsid");
            that.addGoods(goodsId);
        });
        $(".goodsBody").on("blur", ".goodsNum",function(){
            let goodsId = $(this).parents(".generalGoods").data("goodsid");
            let value = parseInt($(this).val());
            if(value >= 0){
            }
            else{
                $(this).val(that.oriCnt);
                return true;
            }
            that.changeGoodsCnt(goodsId,value);
        });
        $(".goodsBody").on("focus", ".goodsNum",function(){
            that.oriCnt = parseInt($(this).val());
        });

        $(".goodsBody").on("click", ".del-goods",function(){
            let goodsId = $(this).parents(".generalGoods").data("goodsid");
            that.clearGoods(goodsId);
        });
        $(".buy-del").on("click",function(){
            that.clearAll();
        })
    }
    render(){
        let totalPrice = 0,
            totalCount = 0,
            html = ``;
        this.m_cartList.forEach(info=>{
            let unitPrice = parseInt(info.normal_price);
                let total = unitPrice * info.count;
                totalPrice += total;
                totalCount += info.count;
            html += `<tr class="order-hd generalGoods" data-goodsid="${info.goods_id}">
                <td class="selector">
                </td>
                <td class="baobei">
                    <a href="${info.link_url}" class="pic">
                        <img src="${info.img}">
                    </a>
                    <div class="mt30" style="float:left;position: relative">
                        <div class="biaoti">
                            <a href="${info.link_url}">${info.goods_name}</a>
                        </div>
                        <div class="fubiao">${info.en_name}</div>
                        <div style="left: 20px; top: -20px; width: 490px; color: rgb(189, 0, 31); z-index: 8; position: absolute;"></div>
                        <div class="xx_cuxiao">
                            
                        </div>
                    </div>
                </td>
                <td class="price">
                    <p>
                        ¥${unitPrice.toFixed(2)}
                    </p>
                </td>
                <td class="quantity">
                    <p>
                        <a class="jian" href="javascript:void(0)">
                            -
                        </a>
                        <input type="text" value="${info.count}" class="goodsNum">
                        <a class="jia" href="javascript:void(0)">
                            +
                        </a>
                    </p>
                </td>
                <td class="amount">
                    <p>
                        ¥<span class="subtotal">${total.toFixed(2)}</span>
                    </p>
                </td>
                <td class="other">
                    <p>
                        <a href="javascript:void(0)" class="del-goods">
                            删除
                        </a>
                    </p>
                </td>
            </tr>`;
        });
        $(".buylist .goodsBody").html(html);
        $("#totalPay").html(`¥${totalPrice.toFixed(2)}`);

        // 同步购物车商品数量
        ProfileMgr.setCartCount(totalCount);
        $(".cartgoodsnum").html(totalCount);
    }
    // 增加一件
    addGoods(goodsId,value=1){
        ProfileMgr.addCartListById(goodsId,value);
        this.m_cartsCbs.fire();
    }
    changeGoodsCnt(goodsId,value=1){
        ProfileMgr.changeGoodsCountById(goodsId,value);
        this.m_cartsCbs.fire();
    }
    // 减少一件
    removeGoods(goodsId){
        ProfileMgr.removeCartListById(goodsId,false,true);
        this.m_cartsCbs.fire();
    }
    // 删除一种商品
    clearGoods(goodsId){
        ProfileMgr.removeCartListById(goodsId,true);
        this.m_cartsCbs.fire();
    }
    // 清除所有
    clearAll(){
        ProfileMgr.setCartList([]);
        this.m_cartsCbs.fire();
    }
}
/*购物车商品end*/
/*换购商品start*/
class Repurchase{
    constructor(){
        this.init.call(this);
    }
    init(){
        this.loadAjaxData();
    }
    loadAjaxData(){
        $.ajax("./server/carts/repurchase.json", {
            dataType: "json"
        })
        .then(res=>{
            console.log(res);
            this.render(res);
        })
    }
    render(res){
        let list = res.data || [];
        let html = ``;
        list.forEach((item,index)=>{
            let cls = index % 4 == 3 ? 'class= "no-margin"' : ""
            html += `<li ${cls} data-goodsid="${item.goods_id}">
                <b>${item.title}</b>
                <div class="pro_all">
                    <div class="pro_pic"><a href="${item.link_url}" target="_blank"><img
                                src="${item.img}" alt="${item.goods_name}"></a>
                    </div>
                    <div class="pro_txt">
                        <p class="biaoti"><a href="${item.link_url}">${item.goods_name}</a></p>
                        <p class="fubiao">${item.buoy}</p>
                        <p><span>换购价:</span><strong class="red">${parseFloat(item.now_price).toFixed(1)}</strong>元</p>
                        <p><span>酒客价:</span><del>${parseFloat(item.ori_price).toFixed(2)}元</del></p>
                        <p><span>数　量:</span>${item.count}</p>
                        <a href="###" class="buy-on"></a>
                        <p class="over">*&nbsp;${item.desc}</p>
                    </div>
                </div>
            </li>`;
        });
        $(".cont_wineli ul").html(html);
    }
}
/*换购商品end*/
$(function(){
    // 是否读取一遍本地数据
    ProfileMgr.repeatLoad();
    $('.web_head').load('./header.html',function(){
        $(".web_head").css("height","120");
        $(".web_head .head_hjk").find(".nav").remove();
        $(".web_head .head_hjk").find(".search")
        .find(".xia")
        .empty()
        .end()
        .end()
        .find(".kuaijie")
        .remove();
        new Header();
        // 购物车
        new Cart();
    });
    new RenderGoods();
    new Repurchase();
    $('.footer').load('./footer.html');

});